<template>
  <div class="caigouruku-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="Search" plain type="primary" @click="openQueryDialog">
          查询
        </el-button>
        <el-button plain type="primary" @click="toPrint">
          <vab-icon icon="printer-line" />
          打印
        </el-button>
        <el-button plain type="primary" @click="toUnBox(2)">
          <vab-icon icon="barricade-line" />
          货位拆箱
        </el-button>
        <el-button plain type="primary" @click="toUnBox(3)">
          <vab-icon icon="barricade-fill" />
          非货位拆箱
        </el-button>
        <el-button plain type="primary" @click="toShowUnBox">
          <vab-icon icon="barcode-box-line" />
          拆箱明细
        </el-button>
        <el-button plain type="primary" @click="toPackBox">
          <vab-icon icon="barcode-box-line" />
          装箱
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      ref="multipleTable"
      :data="barcodeList"
      highlight-current-row
      style="height: calc(100vh - 186px)"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column align="left" label="条码" prop="barcode" width="220" />
      <el-table-column align="left" label="存货编码" width="280">
        <template #default="scope">
          <p style="margin: 0px">编码：{{ scope.row.invcode }}</p>
          <p style="margin: 0px; font-weight: 600">
            名称：{{ scope.row.invname }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="规格型号"
        prop="invspec"
        width="120"
      />
      <el-table-column
        align="left"
        label="批次号"
        prop="invbatch"
        width="180"
      />
      <el-table-column
        align="left"
        label="条码类型"
        prop="typeName"
        width="180"
      />
      <el-table-column align="left" label="条码数" width="150">
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #3300ff">
            {{ scope.row.qty }} {{ scope.row.measName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="left" label="可用数" width="150">
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #3300ff">
            {{ scope.row.kyQty }} {{ scope.row.measName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="left" label="可上料" width="150">
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #3300ff">
            {{ scope.row.mesQty }} {{ scope.row.measName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="left" label="仓库" prop="whName" width="180" />
      <el-table-column align="left" label="条码来源" width="180">
        <template #default="scope">
          <span>
            {{ scope.row.sourceMoudle }}中的{{ scope.row.sourceBillType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="创建信息"
        prop="cMakeTime"
        width="220"
      >
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #003366">
            {{ scope.row.createUsername }}
          </p>
          <p style="margin: 0px; font-weight: 600; color: #003399">
            {{ scope.row.createTime }}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="left" label="备注" prop="remark" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <queryDialog ref="queryDialogRef" @success-callback="queryCallback" />
    <UnBoxVue ref="unBoxRef" @unbox-success-callback="queryCallback" />
    <UnBoxDetailVue ref="unBoxDetailRef" />
    <PackBoxListVue ref="packBoxListRef" @packbox-success-callback="queryCallback"/>
  </div>
</template>

<script setup>
  import { Search } from '@element-plus/icons-vue'
  import { getBarcodePageApi } from '@/api/kc/barcode_record'
  import { localStorageConfig } from '@/config/localstorage.config'
  import queryDialog from './modules/queryDialog.vue'
  import UnBoxVue from './modules/unBox.vue'
  import UnBoxDetailVue from './modules/unBoxDetail.vue'
  import PackBoxListVue from './modules/packBoxList.vue'
  import hiPrint from '@/utils/hiPrint.js'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const queryForm = ref({ pkCorp: pkCorp })
  const barcodeList = ref()
  const currentDetailRow = ref()
  const selectedRows = ref()

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  })

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
  }
  //#endregion

  const queryDialogRef = ref()
  const unBoxRef = ref()
  const unBoxDetailRef = ref()
  const packBoxListRef = ref()

  const toUnBox = (type) => {
    if (
      currentDetailRow.value !== undefined &&
      currentDetailRow.value.pkBarcodeRecord
    ) {
      unBoxRef.value.openDialog(currentDetailRow.value, type)
    } else {
      $baseMessage('请选择需要拆分的条码!', 'error')
    }
  }

  const toShowUnBox = () => {
    if (
      currentDetailRow.value !== undefined &&
      currentDetailRow.value.pkBarcodeRecord
    ) {
      unBoxDetailRef.value.openUnBoxDetail(currentDetailRow.value.pkBarcodeRecord)
    } else {
      $baseMessage('请选择需要查看的条码!', 'warning')
    }
  }
  const toPackBox=()=>{
    if(selectedRows.value===undefined || selectedRows.value.length<=0){
      $baseMessage('请选择需要装箱的条码!', 'warning')
    }else{
      let pkInv=selectedRows.value[0]['pkInv']
      let pkWarehouse=selectedRows.value[0]['pkWarehouse']
      let newList = selectedRows.value.filter(item=>{
        if(pkInv==item.pkInv && pkWarehouse==item.pkWarehouse && item.mesQty>0){
          return true
        }
      })
      packBoxListRef.value.openPackBoxDetail(newList)
    }
  }

  const getBarcodeList = async () => {
    const load = $baseLoading()
    try {
      let params = {
        ...queryForm.value,
        ...paginationParams,
        beginDate:
          (queryForm.value===undefined || queryForm.value.queryDate === undefined)
            ? ''
            : queryForm.value.queryDate[0],
        endDate:
          (queryForm.value===undefined || queryForm.value.queryDate === undefined)
            ? ''
            : queryForm.value.queryDate[1],
      }
      const { code, msg, data } = await getBarcodePageApi(params)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        barcodeList.value = data.list
        paginationParams.total = data.total
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const openQueryDialog = () => {
    queryDialogRef.value.openDialog()
  }

  const queryCallback = (value) => {
    if(value){
      queryForm.value = value
    }
    getBarcodeList()
  }

  const handleCurrentChange = async (row) => {
    currentDetailRow.value = row
  }
  const handleSelectionChange = (rows) => {
    selectedRows.value = rows
  }

  const toPrint = () => {
    hiPrint('bar_001', selectedRows.value)
  }

  watch(paginationParams, () => getBarcodeList())

  onMounted(() => getBarcodeList())
</script>
